<template>
  <div class="ba_f outerLayer">
    <div class="sellback" id="box">
      <div class="login_wrap">
        <div class="warp_content">
          <div class="title">
            <h3>商家管理后台登录</h3>
            <span class="txt"></span>
          </div>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
            <el-form-item prop="userName">
              <el-input prefix-icon="iconfont iconzhanghao mar_l5" v-model="ruleForm.userName" autocomplete="off" placeholder="请输入登录账号" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item prop="passWord">
              <el-input prefix-icon="iconfont iconmima mar_l5" v-model="ruleForm.passWord" autocomplete="off" type="password" placeholder="请输入密码" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item prop="yzm">
              <el-input size="large" prefix-icon="iconfont iconmima mar_l5" v-model="ruleForm.yzm" autocomplete="off" placeholder="请输入图形验证码" style="width: 300px" class="yzm">
                <el-button slot="append">
                  <canvas @click="getYzm" id="canvas" width="120" height="40"></canvas>
                </el-button>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 300px;" @click.native.prevent="loginEnter" @keyup.enter.native="loginEnter('loginData')">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { htLoginin } from '@/api/setup';
import { yzm } from '@/assets/js/yzm';
import '../../assets/css/loginysw.css';
import { mapMutations } from 'vuex';

export default {
  mounted() {
    yzm(1);
  },
  created() {
    var _self = this;
    document.onkeydown = function (e) {
      if (window.event == undefined) {
        var key = e.keyCode;
      } else {
        var key = window.event.keyCode;
      }
      if (key == 13) {
        _self.loginEnter('loginData');
      }
    };
  },
  data() {
    var checkTel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'));
      }
      setTimeout(() => {
        callback();
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        setTimeout(() => {
          callback();
        }, 1000);
      }
    };
    var yzm = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'));
      } else {
        setTimeout(() => {
          callback();
        }, 1000);
      }
    };
    return {
      ruleForm: {
        userName: '',
        passWord: '',
        yzm: ''
      },
      rules: {
        userName: [{ validator: checkTel, trigger: 'blur' }],
        passWord: [{ validator: validatePass, trigger: 'blur' }],
        yzm: [{ validator: yzm, trigger: 'blur' }]
      },
      graphical: '',
      // ---------------
      canvas: '',
      context: ''
    };
  },
  methods: {
    ...mapMutations(['storeMsg']),
    getYzm() {
      yzm();
    },
    async loginEnter(ruleForm) {
      // console.log(this.ruleForm);
      if (this.ruleForm.userName && this.ruleForm.passWord) {
        if (this.ruleForm.yzm != sessionStorage.getItem('yzm')) {
          this.$baseMessage('请输入正确的验证码', 'error');
          return false;
        }
        const { msg, code, data } = await htLoginin(this.ruleForm);
        if (code == 1 && data) {
          if (data.type == '1' || data.type == '2') {
            this.$baseMessage(msg, 'success');
            this.$router.push({ path: '/storesurvey' });
          } else {
            this.storeMsg(data.storeId);

            this.$baseMessage(msg, 'success');
            this.$router.push({ path: '/storeindex' });
          }
          document.onkeydown = undefined;
        }
      } else {
        this.$message({
          type: 'error',
          message: '请输入账号和密码!',
          duration: 1000
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.yzm {
  .el-button {
    padding: 0 0 !important;
  }
}

.login_wrap {
  width: 420px;
  background: #fff;
  border-radius: 5px;
}

.el-input--prefix .el-input__inner {
  padding-left: 35px;
}

.outerLayer {
  width: 100%;
  height: 100%;
  background: url(../../assets/public/login_bg2.png) no-repeat;
  background-size: cover;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  align-items: center;
}

.sellback {
  width: 420px;
  height: 430px;
  margin: 10% auto 0 auto;
  background-color: #fff;
  border-radius: 10px;
}

.warp_content {
  width: 300px;
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
}

.warp_content .title {
  margin-top: 10px;
  padding-bottom: 30px;
  margin-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.warp_content .title h3 {
  font-size: 20px;
  color: #333;
  line-height: 32px;
}

.formInfo {
  margin-top: 30px;
  overflow: hidden;
}

.formInfo .formText {
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.formInfo .formText .input-text {
  border: 0;
  height: 42px;
  padding: 6px 28px 6px 18px;
  width: 340px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.formInfo .formText input:focus {
  outline: none;
  box-shadow: none;
}

.formInfo .formText .login-icon {
  position: absolute;
  top: 9px;
  left: 18px;
  width: 14px;
  height: 13px;
  z-index: 9;
  border-right: 1px solid #e3e4e8;
  height: 30px;
  width: 30px;
}

.formInfo .submitDiv {
  font-size: 0;
  padding-top: 20px;
}

.passwordText {
  height: 20px;
  line-height: 20px;
}

.passwordl {
  float: left;
  height: 20px;
  line-height: 20px;
}

.passwordl .check {
  width: 17px;
  height: 17px;
  border: 1px solid #d4d4d4;
  background-color: #fff;
}

.passwordl label {
  margin-top: -10px;
  margin-left: 3px;
}

.passwordr {
  float: right;
  color: #999;
}

.passwordr a {
  font-size: 14px;
  color: #999;
  margin: 0 5px;
}
</style>
